<!--折线图-->
<template>
  <div class="line-part w-full h-full" ref="lineChart"></div>
</template>

<script lang="ts" setup>
import { defineComponent, markRaw, onMounted, onBeforeUnmount, ref, watch } from 'vue';
import * as echarts from 'echarts';
import { sleep } from '@/utils/sleep';

defineComponent({ name: 'LineChart' });

const props = defineProps({
  echartsData: {
    type: Object,
    default: () => {
      return { label: [], data: [] };
    },
  },
  color: {
    type: Array,
    default: () => {
      return ['rgba(0, 244, 230, 1)', 'rgba(0, 146, 249, 1)'];
    },
  },
  graphicColor: {
    type: Array,
    default: () => {
      return [];
    },
  },
  extra: {
    type: Object,
    default: () => {
      return { smooth: false, yAxis: {}, maxLabel: 10, legend: {}, tooltip: {}, grid: {} };
    },
  },
});

const lineChart = ref();
const myChart = ref<any>(null);
const timer = ref<any>(null)

function initEcharts(echartsData: any) {
  // 标记一个对象，使其永远不会再成为响应式对象
  myChart.value = markRaw(echarts.init(lineChart.value));
  const color = props.color;
  const graphicColor: any[] = props.graphicColor || [[]];
  let series: object[] = [];
  const data = echartsData.data || [];
  const label = echartsData.label || [];

  data.forEach((item: any, index: number) => {
    const part: any = {
      name: item.name,
      type: 'line',
      smooth: true,
      data: item.value,
      showSymbol: false,
      lineStyle: {
        width: 2,
      },
      itemStyle: {
        color: color[index],
      },
    };
    if (graphicColor.length) {
      part.areaStyle = {
        color: new echarts.graphic.LinearGradient(
          0,
          0,
          0,
          1,
          [
            {
              offset: 0,
              color: graphicColor[index][0],
            },
            {
              offset: 0.8,
              color: graphicColor[index][1],
            },
          ],
          false
        ),
      };
    }
    series.push(part);
  });
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        lineStyle: {
          color: '#57617B',
        },
      },
      backgroundColor: 'rgba(0,150,236,0.6)',
      textStyle: {
        color: '#fff',
      },
      ...props.extra?.tooltip,
    },
    legend: {
      icon: 'react',
      itemWidth: 28,
      itemHeight: 3,
      itemGap: 26,
      padding: [20, 60],
      data: data.map((item: any) => item.name),
      top: 0,
      right: 12,
      textStyle: {
        fontSize: 14,
        color: '#fff',
      },
      ...props.extra.legend,
    },
    grid: {
      top: '50',
      left: '20',
      right: '20',
      bottom: '0',
      containLabel: true,
      ...props.extra?.grid,
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: true,
        axisTick: {
          show: false,
        },
        axisLabel: {
          fontSize: 12,
          color: 'rgba(225, 225, 225, 0.6)',
        },
        axisLine: {
          lineStyle: {
            fontSize: 12,
            color: 'rgba(93, 122, 166, 1)',
          },
        },
        data: label,
      },
    ],
    yAxis: [
      {
        type: 'value',
        name: '',
        minInterval: 1,
        axisTick: {
          show: false,
        },
        axisLabel: {
          fontSize: 10,
          color: 'rgba(225, 225, 225, 0.6)',
        },
        axisLine: {
          show: false,
          lineStyle: {
            fontSize: 12,
            color: 'rgba(93, 122, 166, 1)',
          },
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: 'rgba(93, 122, 166, 1)',
          },
        },
        ...props.extra.yAxis,
      },
    ],
    series,
  };
  myChart.value.setOption(option, true);
  let i = -1;
  timer.value = setInterval(() => {
    i = i === data[0].value.length ? 0 : i + 1;
    myChart.value.dispatchAction({
      type: "showTip",
      seriesIndex: 0, // 显示第几个series
      dataIndex: i, // 显示第几个数据
    });
  }, 2000);
  window.addEventListener('resize', () => {
    if (myChart.value) myChart.value.resize();
  });
}

function destroyEcharts() {
  if (myChart.value) {
    myChart.value.dispose();
    myChart.value = null;
  }
  if (timer.value) {
    clearInterval(timer.value);
    timer.value = null;
  }
}

onMounted(() => {
  watch(
    () => props.echartsData,
    async (val: any) => {
      destroyEcharts();
      await sleep(500);
      if (lineChart.value) initEcharts(val);
    },
    { immediate: true, deep: true }
  );
});

onBeforeUnmount(() => {
  destroyEcharts();
});
</script>

<style scoped></style>
